<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>03_数组</title>
  </head>
  <body>
    <script>
      /* 
      数组与普通对象的区别?
      数组的常用方法
      */

      /* 
      数组与普通对象的区别?
        1. 数组内部的数据是有序的
        2. 数组提供了很多操作内部元素数据的方法, 而对象都是通过.操作
      */

      /* 
      数组的常用方法
        1. 改变数组(7个)
          push: 添加到最后
          unshift: 添加到头部(第一个)
          pop: 删除最后
          shift: 删除头部(第一个)
          splice: 任意位置增删改
          sort: 排序
          reverse: 倒序
        2. 带遍历回调的 (7个)
          forEach: 纯遍历
          map: 映射生成一个相同长度的新数组
          filter: 过滤产生一个子数组
          reduce: 累计/累加产生一个结果值(数值 / 对象 / 数组)
          find/findIndex: 查找出第一个满足条件的元素/元素的索引   
          some: 判断是否有一个满足条件的 (布尔值)
          every: 判断是否全部满足条件 (布尔值)
        3. 其它 (5个)
          concat: 合并数组
          slice: 切换, 切出一段连续元素组成的新数组
          join: 连接成字符串
          indexOf / lastIndexOf: 查找数据在数组中的对应下标
          includes: 是否包含某个数据
      */

      /* 
      1. 改变数组(7个)
          push: 添加到最后
          unshift: 添加到头部(第一个)
          pop: 删除最后
          shift: 删除头部(第一个)
          splice: 任意位置增删改
          sort: 排序
          reverse: 倒序
      */
      const arr = [4, 2, 3, 5]
      arr.push(6)  // 4, 2, 3, 5, 6
      arr.unshift(7) // 7, 4, 2, 3, 5, 6
      arr.pop() // 7, 4, 2, 3, 5
      arr.shift() // 4, 2, 3, 5
      arr.splice(1, 0, 8) // 4, 8, 2, 3, 5
      arr.splice(1, 1, 7) // 4, 7, 2, 3, 5
      arr.splice(1, 1) // 4, 2, 3, 5
      arr.reverse() // 5, 3, 2, 4
      // arr.sort() // 2, 3, 4, 5
      arr.sort((item1, item2) => { // 比较函数返回数值  如果>0, item2放在左边
        return item2 - item1
      })
      console.log(arr) 



      /* 
      需求:
      得到所有商品名与价格的数组, 且价格都翻倍
      得到所有价格大于88的所有商品
      找到一个价格小于90的商品
      得到所有价格大于88的所有商品的价格总和
      找到一个价格小于90的商品的下标
      判断是否所有商品价格都小于80
      判断是否有价格小于80的商品
      */
      const products = [
        { id: 1, name: 'A', price: 100 },
        { id: 2, name: 'B', price: 85 },
        { id: 3, name: 'C', price: 90 },
        { id: 4, name: 'D', price: 75 },
        { id: 5, name: 'E', price: 88 },
      ];
      /* 得到所有商品名与价格的数组, 且价格都翻倍 */
      console.log(products.map(p => ({name: p.name, price: p.price * 2})))
      /* 得到所有价格大于88的所有商品 */
      console.log(products.filter(p => p.price>88))
      /* 找到一个价格小于90的商品 */
      console.log(products.find(item => item.price<90))
      /* 得到所有价格大于88的所有商品的价格总和 */
      console.log(products.reduce((pre, item) => pre + (item.price>88 ? item.price : 0), 0))
      /* 找到一个价格小于90的商品的下标 */
      console.log(products.findIndex(p => p.price<90))
      /* 判断是否所有商品价格都小于80 */
      console.log(products.every(p => p.price<80))

      /* 判断是否有价格小于80的商品 */
      console.log(products.some(p => p.price<80))

      products.sort((p1, p2) => p1.price - p2.price)
      console.log(products)

      /* 
      3. 其它 (5个)
        concat: 合并数组
        slice: 切换, 切出一段连续元素组成的新数组
        join: 连接成字符串
        indexOf / lastIndexOf: 查找数据在数组中的对应下标
        includes: 是否包含某个数据
      */
      const arr1 = [1, 3, 5]
      console.log(arr1.concat([6, 7], {m: 1})) // [1, 3, 5, 6, 7, {m: 1}]
      console.log([1, 2, 3, 4, 5, 6].slice(1, 4)) // [2, 3, 4]
      console.log([1, 2, 3].join('-'))
      console.log([1, 3, 5, 7].indexOf(5)) // 2
      console.log([1, 3, 5, 7].indexOf(2)) // -1
      console.log([1, 3, 5].includes(3)) // true
      console.log([1, 3, 5].includes(7)) // false
    </script>
  </body>
</html>
